// 滚动区域 首页页面 
<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">
      <category-icons></category-icons>
      <!-- 没有错误提示信息时才显示推荐列表页面组件 -->
      <div v-if="!errorShow">
        <!-- 景点标题/子组件传值 -->
        <home-title :title="homeTitle.viewTitle"> </home-title>
        <view-list :viewDatas="homeDatas.viewDatas"></view-list>
        <!-- 美食标题/子组件传值 -->
        <home-title :title="homeTitle.foodTitle"></home-title>
        <food-list :foodDatas="homeDatas.foodDatas"></food-list>
        <!-- 酒店标题/子组件传值 -->
        <home-title :title="homeTitle.hotelTitle"></home-title>
        <hotel-list :hotelDatas="homeDatas.hotelDatas"></hotel-list>
        <!-- 按摩标题/子组件传值 -->
        <home-title :title="homeTitle.massageTitle"></home-title>
        <massage-list :massageDatas="homeDatas.massageDatas"></massage-list>
        <!-- ktv标题/子组件传值 -->
        <home-title :title="homeTitle.ktvTitle"></home-title>
        <ktv-list :ktvDatas="homeDatas.ktvDatas"></ktv-list>
      </div>
      <error :errorShow="errorShow"> </error>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
import { mapState } from "vuex";

// 导入通用组件
import CategoryIcons from "./CategoryIcons/Index";
import HomeTitle from "./Sub/HomeTitle";
import Error from "./Sub/Error";

//导入子组件
import ViewList from "./ViewList/Index";
import FoodList from "./FoodList/Index";
import HotelList from "./HotelList/Index";
import MassageList from "./MassageList/Index";
import KtvList from "./KtvList/Index";

// 导入模型
import { IndexModel } from "models/index";

// 导入工具函数
import tools from "utils/tools";

export default {
  name: "HomeScrollWrapper",
  components: {
    CategoryIcons: CategoryIcons,
    HomeTitle: HomeTitle,
    ViewList: ViewList,
    FoodList: FoodList,
    HotelList: HotelList,
    MassageList: MassageList,
    KtvList: KtvList,
    Error: Error,
  },
  data: function () {
    return {
      currentCityId: 0,
      errorShow: false,
      homeTitle: {
        viewTitle: "推荐景点",
        foodTitle: "推荐美食",
        hotelTitle: "推荐酒店",
        ktvTitle: "推荐ktv",
        massageTitle: "推荐按摩",
      },
      homeDatas: {
        foodDatas: [],
        hotelDatas: [],
        ktvDatas: [],
        massageDatas: [],
        viewDatas: [],
      },
    };
  },
  computed: {
    //拿到vuex里的state数据
    ...mapState(["cityId"]),
  },
  // keep-alive:组件缓存时不会触发mounted生命周期函数
  mounted: function () {
    this.scroll = new BetterScroll(this.$refs.wrapper);

    this.currentCityId = this.cityId;

    // 将computed里的数据传入
    this.getHomeDatas(this.cityId);
  },
  // keep-alive:组件缓存时会触发activated生命周期函数
  activated: function () {
    //通过当前城市id和被选择城市id对比是否一致
    //来确定当前城市的状态是否被更改(是否被切换)
    if (this.currentCityId !== this.cityId) {
      //如果不等就强制相等
      this.currentCityId = this.cityId;

      //只有数据不相等的时候才重新请求
      // 将computed里的数据传入
      //数据传入后数据发生更改重新渲染视图
      this.getHomeDatas(this.currentCityId);
    }
  },
  methods: {
    getHomeDatas(cityId) {
      const indexModel = new IndexModel();
      indexModel.getHomeDatas(cityId).then((res) => {
        // console.log(res);
        /**
         * {
         *   data: {
         *     data: {
         *       foodDatas: [{…}, {…}],
         *       hotelDatas: [{…}, {…}],
         *       ktvDatas: [{…}, {…}],
         *       massageDatas: [{…}, {…}],
         *       viewDatas: [{…}, {…}],
         *     },
         *     ...
         *     status: 0
         *   }
         * }
         *
         * {
         *   address: "...",
         *   area: "五棵松",
         *   city_id: "1",
         *   city_mark: "beijing",
         *   city_name: "北京",
         *   comment_keyword: "味道赞256,服务热情214,...",
         *   default_price: "74",
         *   field: "韩国菜",
         *   id: "5",
         *   img: "https://img.meituan.net/.../.jpg",
         *   keyword: "五棵松日韩料理第2名,鸡汤不错,回头客多"
         *   name: "鲜有基参鸡汤（五棵松店）",
         *   open_datetime: "周一至周日 10:30-22:00",
         *   pics: "[\"https://....jpg\",\"https://...jpg\"...]",
         *   recom: "鲜有基十全参鸡汤,鲜有基参鸡汤,...",
         *   score: "5.0",
         *   star: "5"
         * }
         */

        // 缓存后端响应的数据到HomeScrollWrapper组件的data里
        if (res && res.status === 0) {
          // 请求数据成功不显示错误信息
          this.errorShow = false;
          const data = res.data;
          this.homeDatas.foodDatas = tools.formatJSON(
            data.foodDatas,
            "keyword"
          );
          this.homeDatas.hotelDatas = data.hotelDatas;
          this.homeDatas.ktvDatas = data.ktvDatas;
          this.homeDatas.massageDatas = data.massageDatas;
          this.homeDatas.viewDatas = data.viewDatas;
          // console.log(this.homeDatas);
        } else {
          // 请求数据失败显示错误信息
          this.errorShow = true;
          console.log({
            statusCode: res.status,
            error_msg: res.err,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>